<template>
    <div class="checkOrder-box">
        <el-dialog
            title="下单"
            :visible.sync="checkOrderShow"
            width="70%"
            center
            :close-on-click-modal='false'
            :before-close="closeCheckOrderShow"
        >
            <el-tabs v-model="checkOrderData.activeName" @tab-click="handleTbaClick">
                <el-tab-pane label="1对1定制课下单" name="1">
                    <h3>学生基本信息</h3>
                    <div class="stu-info-box">
                        <p>学生姓名：{{checkOrderData.name}}</p>
                        <p>用户名：{{checkOrderData.studentUserName}}</p>
                        <p>
                            <span style="color:red">*</span>
                            手机号：{{checkOrderData.phone}}
                        </p>

                        <p style="margin-top:0">
                            年级：
                            <el-select
                                v-model="checkOrderData.grade"
                                placeholder="请选择"
                                @change="dingzhiGradeChange"
                                clearable
                                :disabled="checkOrderData.grade?true:false"
                            >
                                <el-option
                                    v-for="item in checkOrderData.gradeList"
                                    :key="item.value"
                                    :label="item.wusiName"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </p>
                    </div>
                    <div class="stu-info-box">
                        <!-- <p>业务线：{{checkOrderData.name}}</p> -->
                        <p>客户来源：{{checkOrderData.laiyuan}}</p>
                        <p>推广来源：{{checkOrderData.source}}</p>
                    </div>
                    <el-divider></el-divider>
                    <h3>订单信息</h3>
                    <div class="order-info">
                        <dl>
                            <dt>
                                <span style="color:red">*</span>班型：
                            </dt>
                            <dd>
                                <el-select
                                    v-model="checkOrderData.o2oKlassType"
                                    placeholder="请选择"
                                    @change="o2oKlassTypeChange"
                                    clearable
                                >
                                    <el-option
                                        v-for="item in o2oKlassTypeListOptions"
                                        :key="item.code"
                                        :label="item.name"
                                        :value="item.code"
                                    ></el-option>
                                </el-select>
                            </dd>
                            <dt style="margin-left:30px">
                                <span style="color:red">*</span>商品价格级别：
                            </dt>
                            <dd>
                                <el-select
                                    v-model="checkOrderData.o2oGoodsPriceLevel"
                                    placeholder="请选择"
                                    @change="o2oGoodsPriceLevelChange"
                                    clearable
                                >
                                    <el-option
                                        v-for="item in o2oGoodsPriceLevelListOptions"
                                        :key="item.code"
                                        :label="item.name"
                                        :value="item.code"
                                    ></el-option>
                                </el-select>
                            </dd>
                        </dl>
                    </div>
                    <div class="order-info">
                        <p style="width:100%">
                            <span style="color:red">*</span>学科：
                            <span
                                style="margin-left:60px;"
                                v-for="item in oneVsOneSpecialtyListOtions"
                                :key='item.code'
                            >{{item.name}}</span>
                        </p>
                    </div>
                    <div class="order-info order-info2">
                        <p><span style="color:red">*</span>商品名称：</p>
                        <el-input v-model='checkOrderData.OVOgoodsName' placeholder="请输入"></el-input>
                    </div>
                    <div class="order-info mt10">
                        <dl>
                            <dt>
                                <span style="color:red">*</span>购买课时：
                            </dt>
                            <dd class="ml45">
                                <el-input
                                    placeholder="请输入"
                                    v-model="oneVsOneClsstime"
                                    @blur="queryLessonPrice"
                                ></el-input>
                            </dd>
                            <dt style="margin-left:35px">
                                <span style="color:red">*</span>赠送课时：
                            </dt>
                            <dd>
                                <el-input placeholder="请输入" v-model="oneVsOneGiveClassTime"></el-input>
                            </dd>
                        </dl>
                        <p>
                            <span style="color:red">*</span>课单价：
                            <span style="font-size:16px;color:red">{{price}}</span>元/课时
                        </p>
                    </div>
                    <div class="order-info">
                        <p>
                            <span>&nbsp;&nbsp;商品原价：</span>
                            <span
                                style="margin-left:40px;font-size:20px"
                            >￥{{parseInt(parseInt(oneVsOneClsstime)+parseInt(oneVsOneGiveClassTime))*price}}</span>
                        </p>
                    </div>
                    <div class="order-info">
                        <p>
                            <span>&nbsp;&nbsp;商品现价：</span>
                            <span
                                style="margin-left:40px;font-size:20px"
                            >￥{{oneVsOneClsstime*price}}</span>
                        </p>
                    </div>
                    <div class="order-info">
                        <p>
                            <span>&nbsp;&nbsp;应收金额：</span>
                            <span
                                style="margin-left:40px;font-weight:bold;font-size:20px;color:red"
                            >￥{{oneVsOneClsstime*price}}</span>
                            
                        </p>
                    </div>
                    <div class="order-info mt20">
                        <span style="display:inline-block;width:128px">&nbsp;&nbsp;备注：</span>
                        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="oneVsOneRemark"></el-input>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="1对1商品下单" name="2">
                    <h3>学生基本信息</h3>
                    <div class="stu-info-box">
                        <p>学生姓名：{{checkOrderData.name}}</p>
                        <p>用户名：{{checkOrderData.studentUserName}}</p>
                        <p>
                            <span style="color:red">*</span>
                            手机号：{{checkOrderData.phone}}
                        </p>
                        <p style="margin-top:0">
                            年级：
                            <el-select
                                v-model="checkOrderData.grade"
                                placeholder="请选择"
                                :change="dingzhiGradeChange"
                                clearable
                                :disabled="checkOrderData.grade?true:false"
                            >
                                <el-option
                                    v-for="item in checkOrderData.gradeList"
                                    :key="item.value"
                                    :label="item.wusiName"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </p>
                    </div>
                    <div class="stu-info-box">
                        <!-- <p>分校编码：</p>
                        <p>分校名称：{{checkOrderData.phone}}</p>
                        <p>
                            业务线：
                            {{checkOrderData.phone}}
                        </p> -->
                        <p>客户来源：{{checkOrderData.laiyuan}}</p>
                        <p>推广来源：{{checkOrderData.source}}</p>
                        
                    </div>
                    <el-divider></el-divider>
                    <h3>订单信息</h3>
                    <div class="order-info order-info2 order-info3">
                        <dl>
                            <dt>
                                <span style="color:red">*</span>年级：
                            </dt>
                            <dd>
                                <el-select
                                    v-model="checkOrderData.grade"
                                    placeholder="请选择"
                                    :change="dingzhiGradeChange"
                                    clearable
                                    :disabled="checkOrderData.grade?true:false"
                                >
                                    <el-option
                                        v-for="item in checkOrderData.gradeList"
                                        :key="item.value"
                                        :label="item.wusiName"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </dd>
                        </dl>
                    </div>
                    <div class="order-info order-info2 mt10">
                        <dl>
                            <dt>
                                <span style="color:red">*</span>选择商品：
                            </dt>
                            <dd>
                                <el-button
                                    type="primary"
                                    class="mt5"
                                    :size="size"
                                    @click="addCommodity"
                                >+添加商品</el-button>
                            </dd>
                        </dl>
                    </div>
                    <Crm-table
                        TsCheckOrder
                        class="table-width mt10"
                        width="400"
                        @handleDeleteDic="OVOhandleDeleteDic"
                        :data="tsPageResult"
                        :showOperation="false"
                        :columns="columns2"
                        :loading="loading2"
                        :border="true"
                        :order="false"
                        :sizes="false"
                    ></Crm-table>
                    <div style="display:flex">
                        <p class="mt10">商品原价：</p>
                        <i style="display:block;font-style:normal;font-size:18px;color:red;margin-top: 5px;">¥{{OVOprice}}</i>
                    </div>
                    <div style="display:flex">
                        <p class="mt10">商品现价：</p>
                        <i style="display:block;font-style:normal;font-size:18px;color:red;margin-top: 5px;">¥{{OVOrealPrice}}</i>
                    </div>
                    <div style="display:flex">
                        <p class="mt10">限时促销价：</p>
                        <i style="display:block;font-style:normal;font-size:18px;color:red;margin-top: 5px;">¥{{OVOdiscountPrice}}</i>
                    </div>
                    <!-- <div style="display:flex">
                        <p class="mt10">邮费：</p>
                        <i style="display:block;font-style:normal;font-size:18px;color:red;margin-top: 5px;">¥{{postage}}</i>
                    </div> -->
                    <div style="display:flex">
                        <p class="mt10">应收金额：</p>
                        <i style="display:block;font-style:normal;font-size:18px;color:red;margin-top: 5px;">¥{{OVOyingshouprice}}</i>
                    </div>    
                    
                    <div class="mt10" style="display:flex">
                        <span style="display:inline-block;width:50px">备注：</span>
                        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="OVOremark"></el-input>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="1对1特殊课下单" name="3">
                    <h3>学生基本信息</h3>
                    <div class="stu-info-box">
                        <p>学生姓名：{{checkOrderData.name}}</p>
                        <p>用户名：{{checkOrderData.studentUserName}}</p>
                        <p>
                            <span style="color:red">*</span>
                            手机号：{{checkOrderData.phone}}
                        </p>

                        <p style="margin-top:0">
                            年级：
                            <el-select
                                v-model="checkOrderData.grade"
                                placeholder="请选择"
                                @change="dingzhiGradeChange"
                                clearable
                                :disabled="checkOrderData.grade?true:false"
                            >
                                <el-option
                                    v-for="item in checkOrderData.gradeList"
                                    :key="item.value"
                                    :label="item.wusiName"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </p>
                    </div>
                    <div class="stu-info-box">
                        <p>客户来源：{{checkOrderData.laiyuan}}</p>
                        <p>推广来源：{{checkOrderData.source}}</p>
                    </div>
                    <el-divider></el-divider>
                    <h3>订单信息</h3>
                    <div class="ts-order-box">
                        <div class="list">
                            <p>
                                <span style="color:red">*</span>下单类型：
                            </p>
                            <el-radio
                                style="margin-top: 17px;"
                                v-model="tsData.orderType"
                                label="1"
                            >转介绍赠送</el-radio>
                            <el-radio
                                style="margin-top: 17px;"
                                v-model="tsData.orderType"
                                label="2"
                            >特批赠送</el-radio>
                        </div>
                    </div>
                    <div class="ts-order-box">
                        <div class="list">
                            <p>
                                <span style="color:red">*</span>年级：
                            </p>
                            <el-select
                                v-model="checkOrderData.grade"
                                placeholder="请选择"
                                @change="dingzhiGradeChange"
                                :disabled="checkOrderData.grade?true:false"
                                clearable
                            >
                                <el-option
                                    v-for="item in checkOrderData.gradeList"
                                    :key="item.value"
                                    :label="item.wusiName"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </div>
                        <div class="list">
                            <p>
                                <span style="color:red">*</span>班型：
                            </p>
                            <el-select
                                v-model="tsData.o2oKlassType"
                                placeholder="班型"
                                clearable
                                filterable
                                @change="o2oKlassTypeChange"
                            >
                                <el-option
                                    v-for="item in o2oKlassTypeListOptions"
                                    :key="item.code"
                                    :label="item.name"
                                    :value="item.code"
                                ></el-option>
                            </el-select>
                        </div>
                        <div class="list list2">
                            <p>
                                <span style="color:red">*</span>商品价格级别：
                            </p>
                            <el-select
                                v-model="tsData.o2oGoodsPriceLevelCode"
                                placeholder="商品价格级别"
                                clearable
                                filterable
                                @change="o2oGoodsPriceLevelChange"
                            >
                                <el-option
                                    v-for="item in o2oGoodsPriceLevelListOptions"
                                    :key="item.code"
                                    :label="item.name"
                                    :value="item.code"
                                ></el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="ts-order-box">
                        <div class="list">
                            <p>
                                <span style="color:red">*</span>学科：
                            </p>
                            <div style="display:flex">
                                <el-checkbox
                                :indeterminate="isIndeterminate"
                                v-model="checkAll"
                                @change="handleCheckAllChange"
                            >全选</el-checkbox>
                            <el-checkbox-group v-model="check" @change="handleCheckedCitiesChange" style="display:flex">
                                <div v-for="item in tsData.specialtyCodeListOtionsArry" :key="item.code">
                                <!-- <div v-for="item in tsData.xk" :key="item.code">   -->
                                    <el-checkbox :label="item.code" class="ml10" @change="handleItemChecked">
                                        <span>{{item.name}}</span>
                                    </el-checkbox>
                                </div>
                            </el-checkbox-group>
                            </div> 
                        </div>
                    </div>
                    <div class="ts-order-box">
                        <div class="list list3">
                            <p>商品名称：</p>
                            <el-input v-model="tsData.goodsName"></el-input>
                        </div>
                    </div>
                    <div class="ts-order-box">
                        <div class="list list4">
                            <p>
                                <span style="color:red">*</span>赠送课时：
                            </p>
                            <el-input v-model="tsData.o2oLessonHour" @blur="tsO2oLessonHourChange"></el-input>
                        </div>
                        <div class="list">
                            <p style="width:100%">
                                <span style="color:red">*</span><span>课时单价：￥{{tsData.goodsPrice}}</span>
                            </p>
                        </div>
                    </div>
                    <div class="ts-order-box">
                        <div class="list list4" style="display:flex">
                            <p>商品原价：</p>
                            <i style="display:block;font-style:normal;font-size:18px;color:red">￥{{tsData.TSgoodsPrice}}</i>
                        </div>
                    </div>
                    <div class="ts-order-box">
                        <div class="list list4" style="display:flex">
                            <p>商品现价：</p>
                            <i style="display:block;font-style:normal;font-size:18px;color:red">￥{{tsData.TSrealPrice}}</i>
                        </div>
                    </div>
                    <div class="ts-order-box">
                        <div class="list list4" style="display:flex">
                            <p>应收金额：</p>
                            <i style="display:block;font-style:normal;font-size:18px;color:red">￥{{tsData.TSprice}}</i>
                        </div>
                    </div>
                    <div class="ts-order-box mt20">
                        <div class="list list5">
                            <p>
                                <span style="color:red">*</span>上传审核证明：
                            </p>
                            <el-upload
                                class="avatar-uploader"
                                :action="upLoadUrl"
                                :show-file-list="false"
                                accept=".jpg, .png"
                                :limit="1"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload"
                                :with-credentials="true"
                            >
                                <img v-if="tsData.imageUrl" :src="tsData.imageUrl" class="avatar" />
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <span slot="footer" class="dialog-footer">
                <el-button :size="size" @click="closeCheckOrderShow">取 消</el-button>
                <el-button :size="size" type="primary" @click="saveOrder" :loading="saveLoading">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="选择商品" :visible.sync="addCommodityShow" width="70%" center>
            <div class="addCommodity-box">
                <div class="addCommodity-c-querBox">
                    <ul>
                        <li>
                            <p>商品编码：</p>
                            <b>
                                <el-input v-model="addCommodityShowQueyBox.code" placeholder="请输入"></el-input>
                            </b>
                        </li>
                        <li>
                            <p>商品名称：</p>
                            <b>
                                <el-input v-model="addCommodityShowQueyBox.name" placeholder="请输入"></el-input>
                            </b>
                        </li>
                        <li>
                            <p>班型：</p>
                            <b>
                                <el-select
                                    v-model="addCommodityShowQueyBox.klassType"
                                    placeholder="请选择"
                                    clearable
                                    filterable
                                >
                                    <el-option
                                        v-for="item in ts_queryBox_klassTypes"
                                        :key="item.code"
                                        :label="item.name"
                                        :value="item.code"
                                    ></el-option>
                                </el-select>
                            </b>
                        </li>
                        <li>
                            <p>年级：</p>
                            <b>
                                <el-select
                                    v-model="addCommodityShowQueyBox.gradeCodes"
                                    placeholder="请选择"
                                    clearable
                                    filterable
                                    :disabled="true"
                                >
                                    <el-option
                                        v-for="item in ts_queryBox_gradeCodes"
                                        :key="item.value"
                                        :label="item.wusiName"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </b>
                        </li>
                        <li>
                            <p>学科：</p>
                            <b>
                                <el-select
                                    v-model="addCommodityShowQueyBox.specialtyCodes"
                                    placeholder="请选择"
                                    clearable
                                    filterable
                                >
                                    <el-option
                                        v-for="item in ts_queryBox_specialtyCodes"
                                        :key="item.code"
                                        :label="item.name"
                                        :value="item.code"
                                    ></el-option>
                                </el-select>
                            </b>
                        </li>
                        <li>
                            <p>商品价格级别：</p>
                            <b>
                                <el-select
                                    v-model="addCommodityShowQueyBox.o2oGoodsPriceLevelCode"
                                    placeholder="请选择"
                                    clearable
                                    filterable
                                >
                                    <el-option
                                        v-for="item in ts_queryBox_o2oGoodsPriceLevelCode"
                                        :key="item.code"
                                        :label="item.name"
                                        :value="item.code"
                                    ></el-option>
                                </el-select>
                            </b>
                        </li>
                        <li>
                            <p>商品组合方式：</p>
                            <b>
                                <el-select
                                    v-model="addCommodityShowQueyBox.type"
                                    placeholder="请选择"
                                    clearable
                                    filterable
                                >
                                    <el-option
                                        v-for="item in ts_queryBox_types"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </b>
                        </li>
                        <li>
                            <p>商品上架状态：</p>
                            <b>
                                <el-select
                                    v-model="addCommodityShowQueyBox.state"
                                    placeholder="请选择"
                                    clearable
                                    filterable
                                >
                                    <el-option
                                        v-for="item in ts_queryBox_states"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </b>
                        </li>
                        <li>
                            <p>创建时间：</p>
                            <b>
                                <el-date-picker
                                    v-model="addCommodityShowQueyBoxDate"
                                    type="daterange"
                                    :start-placeholder="'开始时间'"
                                    :end-placeholder="'结束时间'"
                                    range-separator="至"
                                    :default-time="['00:00:00', '23:59:59']"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    format="yyyy-MM-dd HH:mm:ss"
                                ></el-date-picker>
                            </b>
                        </li>
                    </ul>

                    <el-button :size="size" type="primary" @click="searchBigCProductsPage(pageRequest.pageNo)">搜 索</el-button>
                    <el-button :size="size" @click="resetQueryBigCProductsPage">重 置</el-button>
                </div>
                <el-divider></el-divider>
                <Crm-table
                    @selectionChange="selectionBigCProductsPage"
                    class="table-width"
                    width="400"
                    :data="bigCProductsPage"
                    :columns="columns"
                    ref="multipleTable"
                    :loading="bigCProductsPageLoading"
                    @refreshPageRequest="refreshPageRequest"
                    @sizeChange="sizeChange"
                    :order="false"
                    :sizes="false"
                    :reserveSelection="true"
                ></Crm-table>
                <el-pagination
                    @current-change="handleCurrentChange"
                    :page-size="10"
                    layout="total, prev, pager, next"
                    v-if='bigCProductsPage.content.length>0'
                    :total="bigCProductsPage.totalSize">
                    </el-pagination>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button :size="size" @click="colseAddCommodity">取 消</el-button>
                <el-button :size="size" type="primary" @click="submitSelectionBigCProductsData">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import CrmTable from "@/views/Core/CrmTable";
import { removeAarryObj } from "@/utils/tools";
import { baseUrl } from "@/utils/global";
export default {
    name: "checkOrder",
    props: {
        checkOrderShow: Boolean,
        checkOrderData: Object
    },
    components: {
        CrmTable
    },
    data() {
        return {
            // activeName: '1',
            size: "mini",
            grade_cache_gradeOptions: [],
            addCommodityShow: false,
            loading2: false,
            columns: [
                { prop: "code", label: "商品编码", minWidth: 200 },
                { prop: "name", label: "商品名称", minWidth: 120 },
                { prop: "klassTypeName", label: "班型", minWidth: 120 },
                { prop: "specialtyStr", label: "学科", minWidth: 100 },
                { prop: "gradeStr", label: "年级", minWidth: 100 },
                {
                    prop: "goodsPriceLevelName",
                    label: "商品价格级别",
                    minWidth: 120
                },
                { prop: "typeName", label: "商品组合方式", minWidth: 100 },
                { prop: "lessonCount", label: "课时/讲数", minWidth: 80 },
                { prop: "price", label: "原价", minWidth: 80 },
                { prop: "realPrice", label: "商品现价", minWidth: 80 },
                { prop: "discountPriceStr", label: "限时促销价", minWidth: 100 },
                { prop: "stateName", label: "上架状态", minWidth: 80 },
                { prop: "createTime", label: "创建时间", minWidth: 150 }
            ],
            columns2: [
                { prop: "name", label: "商品名称", minWidth: 120 },
                { prop: "specialtyStr", label: "学科", minWidth: 100 },
                { prop: "gradeStr", label: "年级", minWidth: 100 },
                {
                    prop: "goodsPriceLevelName",
                    label: "商品价格级别",
                    minWidth: 120
                },
                { prop: "klassTypeName", label: "班型", minWidth: 120 },
                { prop: "lessonCount", label: "课时/讲数", minWidth: 80 },
                { prop: "price", label: "原价", minWidth: 80 },
                { prop: "realPrice", label: "商品现价", minWidth: 80 },
                { prop: "discountPriceStr", label: "限时促销价", minWidth: 100 },
                { prop: "otherPrice", label: "其他", minWidth: 100 }
            ],
            pageResult: {
                content: []
            },
            o2oKlassTypeListOptions: [],
            o2oGoodsPriceLevelListOptions: [],
            specialtyListOtions: [],
            newcheckOrderData: "",
            oneVsOneSpecialtyListOtions:[],
            oneVsOneClsstime: 0, //购买课时
            oneVsOneGiveClassTime: '0', //赠送课时
            price: 0, //商品价格
            bigCProductsPage: {
                content: [],
                pageNum: 1,
                pageSize: 10
            },
            addCommodityShowQueyBox: {
                klassType: "",
                gradeCodes: "",
                specialtyCodes: "",
                o2oGoodsPriceLevelCode: "",
                type: "",
                state: "",
                code: "",
                name: "",
                startTime: "",
                endTime: ""
            },
            addCommodityShowQueyBoxDate: "",
            ts_queryBox_klassTypes: [],
            ts_queryBox_gradeCodes: [],
            ts_queryBox_specialtyCodes: [],
            ts_queryBox_o2oGoodsPriceLevelCode: [],
            ts_queryBox_types: [],
            ts_queryBox_states: [],
            selectionBigCProductsPageData: [],
            tsPageResult: {
                content: []
            },
            isloadingDropDown: false,
            bigCProductsPageLoading: false,
            OVOprice: 0,//1对1定制原价
            OVOrealPrice: 0,
            OVOdiscountPrice: 0,
            tsData: {
                orderType: "",
                TSrealPrice:0,
                TSgoodsPrice:0,
                price:'',
                imageUrl: "",
                goodsName:'',
                klassTypeStr:'',
                goodsPriceLevelStr:'',
                itemChecked:[],
                goodsPrice:0,
                remark:'',
                o2oKlassType:'',
                o2oGoodsPriceLevelCode:'',
                specialtyCodeListOtionsArry:[],
                specialtyCodeListOtionsCode:[],
                TSprice:0,
                xk:[
                    {
                        code:'1',
                        name:'学1'
                    },
                    {
                        code:'2',
                        name:'学2'
                    },
                    {
                        code:'3',
                        name:'学3'
                    },
                    {
                        code:'4',
                        name:'学4'
                    },
                    {
                        code:'5',
                        name:'学5'
                    },
                ]
            },
            specialtyCodeList: "",
            specialtyCodeListArry: [],
            specialtyCodeListOtionsArry:[],
            isIndeterminate: true,
            checkAll: false,
            check: [],
            checkedGameId: [],
            
            upLoadUrl:baseUrl+'/mediaInfo/upload',
            // OVOgoodsName:'',//1对1定制商品名称
            goodsIdList:[],
            OVOyingshouprice:0,
            pageRequest: {
                pageNo: 1,
                pageSize: 10
            },
            oneVsOneRemark:'',
            OVOremark:'' ,
            dominIMGUrl:JSON.parse(localStorage.getItem('dominIMGUrl')),
            saveLoading:false
        };
    },
    watch: {
        // checkOrderData(val, oldVal) {
        //     
        //     
        //     if (val.grade && val.grade != "0000") {
        //         this.dingzhiGradeChange(val.grade);
        //     }
        //     // 如果是通用年级，去掉
        //     if (val.grade == "0000") {
        //         val.grade = null;
        //     }
        // },
        // deep: true
    },
    methods: {
        // 1对1定制课下单年级改变 通过年级查找班型
        dingzhiGradeChange(params) {
            // 更新年级
            if (params && params != "0000") {
                this.updateStuGrade(params) 
            }
            this.getClassType(params)
        },
        // 更新年级
        updateStuGrade(params){
            this.$confirm('年级仅可设置一次, 是否继续?', '提示', {
                cancelButtonText: '在想想',
                confirmButtonText: '确定',
                type: 'warning'
                }).then(() => {
                    this.$api.student
                    .updateStuGrade({
                        gradeCode: params,
                        mobile: this.checkOrderData.phone
                    })
                    .then(res => {
                        if (res.result == 2) {
                            this.$message({ message: res.msg, type: "error" });
                        } 
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });    
                    this.checkOrderData.grade=''      
                });
        },
        // 查询班型
        getClassType(params){
            this.$api.student
                .listPropertyJson({
                    gradeCode: params
                })
                .then(res => {
                    if (res.result == 2) {
                        this.$message({ message: res.msg, type: "error" });
                    } else {
                        let data = JSON.parse(res.msg);

                        this.o2oKlassTypeListOptions = data.o2oKlassTypeList;
                    }
                });
        },
        // 班型切换 请求出商品价格级别
        o2oKlassTypeChange(params) {
            this.$api.student
                .listPropertyJson({
                    gradeCode: this.checkOrderData.grade,
                    klassTypeCode: params
                })
                .then(res => {
                    if (res.result == 2) {
                        this.$message({ message: res.msg, type: "error" });
                    } else {
                        let data = JSON.parse(res.msg);
                        this.o2oGoodsPriceLevelListOptions =
                            data.o2oGoodsPriceLevelList;
                        this.checkOrderData.o2oGoodsPriceLevel=''
                        this.tsData.o2oGoodsPriceLevel=''
                        this.oneVsOneSpecialtyListOtions=[]
                        this.checkOrderData.OVOgoodsName=''
                        if(this.checkOrderData.activeName==3){
                            this.check=[]
                            this.tsData.specialtyCodeListOtionsArry=[]
                            this.tsData.o2oGoodsPriceLevelCode=''
                        }
                    }
                });
        },
        // 商品价格级别切换，请求出学科
        o2oGoodsPriceLevelChange(params) {
            this.$api.student
                .listPropertyJson({
                    gradeCode: this.checkOrderData.grade,
                    klassTypeCode: this.checkOrderData.activeName==1?this.checkOrderData.o2oKlassType:this.tsData.o2oKlassType,
                    goodsPriceLevelCode: params
                })
                .then(res => {
                    if (res.result == 2) {
                        this.$message({ message: res.msg, type: "error" });
                    } else {
                        let data = JSON.parse(res.msg);
                        if(this.checkOrderData.activeName==1){
                            this.oneVsOneSpecialtyListOtions = data.specialtyList;
                        }else{
                            this.tsData.specialtyCodeListOtionsArry=data.specialtyList
                        }
                        this.specialtyListOtions = data.specialtyList;
                        this.specialtyCodeListOtionsArry=data.specialtyList
                        let arry = [];
                        let arryStr=[]
                        // 转换价格级别
                        let goodsPriceLevelStr=''
                        this.o2oGoodsPriceLevelListOptions.forEach(item=>{
                            if(params==item.code){
                                goodsPriceLevelStr=item.name
                                this.tsData.goodsPriceLevelStr=item.name
                            }
                        })
                        // 转换班型
                        let klassTypeStr=''
                        this.o2oKlassTypeListOptions.forEach(item=>{
                            if(this.checkOrderData.o2oKlassType==item.code){
                                klassTypeStr=item.name
                            }
                            if(this.tsData.o2oKlassType==item.code){
                                this.tsData.klassTypeStr=item.name
                            }
                        })
                        if(this.checkOrderData.activeName==1){
                            this.oneVsOneSpecialtyListOtions.forEach((item,index) => {
                                arry.push(item.code);
                                arryStr.push(item.name)
                            });
                            if(arryStr.length>0){
                                this.checkOrderData.OVOgoodsName=`【${arryStr.join('/')}】${klassTypeStr}${goodsPriceLevelStr}`
                            }
                            
                        }   
                        
                        this.specialtyCodeList = arry.toString();
                        this.specialtyCodeListArry=arry 
                        if(this.checkOrderData.activeName==3){
                            this.init()
                            this.queryLessonPrice()
                        }
                    }
                });
        },
        // 查询课程单价
        queryLessonPrice() {
            this.$api.student
                .queryLessonPrice({
                    goodsPriceLevelCode: this.checkOrderData.activeName==1?this.checkOrderData.o2oGoodsPriceLevel:this.tsData.o2oGoodsPriceLevelCode,
                    gradeCode: this.checkOrderData.grade,
                    klassTypeCode: this.checkOrderData.activeName==1?this.checkOrderData.o2oKlassType:this.tsData.o2oKlassType,
                    mobile: this.checkOrderData.phone,
                    o2oLessonHour: this.checkOrderData.activeName==1?this.oneVsOneClsstime:20, //购买课时，总部可传
                    specialtyCodeList: this.checkOrderData.activeName==1?this.specialtyCodeList:this.check.join(','),
                    source: 1 //1总部 2分中心
                })
                .then(res => {
                    if (res.result == 2) {
                        this.$message({ message: res.msg, type: "error" });
                    } else {
                        this.price = res.data;
                        if(this.checkOrderData.activeName==3){
                            this.tsData.goodsPrice=res.data
                        }
                    }
                });
        },
        addCommodity() {
            this.addCommodityShow = !this.addCommodityShow;
            this.queryBigCProductsPage();
          
        },
        colseAddCommodity() {
            this.addCommodityShow = !this.addCommodityShow;
        },
        searchBigCProductsPage() {
            // this.addCommodityShowQueyBox.pageNo = 1;
            this.queryBigCProductsPage(null);
        },
        queryBigCProductsPage(pageNo) {
            if(pageNo){
                this.addCommodityShowQueyBox.pageNo=pageNo
            }else{
                this.addCommodityShowQueyBox.pageNo=1
            }
            this.addCommodityShowQueyBox.pageSize=10
            this.bigCProductsPageLoading = true;
            if (this.addCommodityShowQueyBoxDate.length > 0) {
                this.addCommodityShowQueyBox.startTime = this.addCommodityShowQueyBoxDate[0];
                this.addCommodityShowQueyBox.endTime = this.addCommodityShowQueyBoxDate[1];
            }
            if (this.checkOrderData.grade) {
                this.addCommodityShowQueyBox.gradeCodes = this.checkOrderData.grade;
            }
            this.$api.student
                .queryBigCProductsPage(this.addCommodityShowQueyBox)
                .then(res => {
                    if (res.result == 2) {
                        this.$message({ message: res.msg, type: "error" });
                        res.data = [];
                        let content = {
                            content: res.data,
                            totalSize: res.total
                        };
                        this.bigCProductsPageLoading = false;
                        this.bigCProductsPage = content;
                    } else {
                        this.listGoodsPropertyJson().then(data => {
                            if (res.data && res.data.length > 0) {
                                res.data.forEach(j => {
                                    //  年级转义
                                    let gradeCodeArry = [];
                                    if (
                                        j.gradeCodeList &&
                                        j.gradeCodeList.length > 0
                                    ) {
                                        j.gradeCodeList.forEach(ji => {
                                            data.gradeList.forEach(di => {
                                                if (ji == di.value) {
                                                    gradeCodeArry.push(
                                                        di.wusiName
                                                    );
                                                }
                                            });
                                        });
                                        j.gradeStr = gradeCodeArry.toString();
                                    }
                                    if (
                                        j.specialtyCodeList &&
                                        j.specialtyCodeList.length > 0
                                    ) {
                                        let specialtyArry = [];
                                        j.specialtyCodeList.forEach(ji => {
                                            data.specialtyList.forEach(di => {
                                                if (ji == di.code) {
                                                    specialtyArry.push(di.name);
                                                }
                                            });
                                        });
                                        j.specialtyStr = specialtyArry.toString();
                                    }
                                });
                            } else {
                                res.data = [];
                            }
                            let content = {
                                content: res.data,
                                totalSize: res.total
                            };
                            this.bigCProductsPageLoading = false;
                            this.bigCProductsPage = content;
                            this.bigCProductsPage.content.forEach(item=>{
                                if(item.discountPrice==0){
                                    item.discountPriceStr='--'
                                }else{
                                    item.discountPriceStr=item.discountPrice
                                }
                            })
                        });
                    }
                });
        },
        handleCurrentChange(val) {
            this.queryBigCProductsPage(val)
        },
        resetQueryBigCProductsPage() {
            this.addCommodityShowQueyBox = {
                klassType: "",
                gradeCodes: "",
                specialtyCodes: "",
                o2oGoodsPriceLevelCode: "",
                type: "",
                state: "",
                code: "",
                name: "",
                startTime: "",
                endTime: ""
            };
            this.queryBigCProductsPage(null);
            // this.addCommodityShowQueyBox.klassType=''
            // this.addCommodityShowQueyBox.gradeCodes=''
            // this.addCommodityShowQueyBox.specialtyCodes=''
            // this.addCommodityShowQueyBox.o2oGoodsPriceLevelCode=''
            // this.addCommodityShowQueyBox.type=''
            // this.addCommodityShowQueyBox.state=''
            // this.addCommodityShowQueyBox.code=''
            // this.addCommodityShowQueyBox.name=''
            // this.addCommodityShowQueyBox.startTime=''
            // this.addCommodityShowQueyBox.endTime=''
        },
        selectionBigCProductsPage(selections) {
            
            this.selectionBigCProductsPageData = selections;
        },
        submitSelectionBigCProductsData() {
            this.addCommodityShow = !this.addCommodityShow;
            this.tsPageResult.content = [];
            this.goodsIdList=[]
            this.OVOprice = 0;
            this.OVOrealPrice = 0;
            this.OVOyingshouprice=0;
            this.OVOdiscountPrice=0;
            let content = {
                content: this.selectionBigCProductsPageData.selections
            };
            this.tsPageResult = content;
            this.tsPageResult.content.forEach(item => {
                this.goodsIdList.push(item.id)
                this.OVOprice += item.price;
                this.OVOrealPrice += item.realPrice;
                if(item.discountPrice>0){
                    item.otherPrice=item.discountPrice

                }else{
                    item.otherPrice=item.realPrice
                }
                this.OVOyingshouprice +=item.otherPrice
                this.OVOdiscountPrice +=item.otherPrice
            });
            
            
                
        },
        refreshPageRequest(params) {
            this.queryBigCProductsPage(params, "");
        },
        sizeChange(params) {
            this.queryBigCProductsPage("", params);
        },
        // 1对1商品下单选中商品删除
        OVOhandleDeleteDic(row) {
            this.$nextTick(() => {
                
                // removeAarryObj(this.bigCProductsPage, row.row);
                removeAarryObj(this.tsPageResult.content, row.row);
                removeAarryObj(
                    this.selectionBigCProductsPageData.selections,
                    row.row
                );
                this.deleteItem(row.row.id,this.goodsIdList)
                this.OVOprice -= row.row.price;
                this.OVOrealPrice -= row.row.realPrice;
                this.OVOyingshouprice -=row.row.otherPrice
                this.OVOdiscountPrice -=row.row.otherPrice
            });
        },
        deleteItem (item, list) {
            for (var key in list) {
                if (list[key] === item) {
                    list.splice(key, 1)
                }
            }
        },
        listGoodsPropertyJson() {
            return new Promise(resolve => {
                this.$api.student.listGoodsPropertyJson().then(res => {
                    if (res.result == 2) {
                        this.$message({ message: res.msg, type: "error" });
                    } else {
                        // 获取下拉列表
                        let data = JSON.parse(res.msg);
                        this.isloadingDropDown = true;
                        this.ts_queryBox_klassTypes = data.o2oKlassTypeList;
                        this.ts_queryBox_gradeCodes = data.gradeList;
                        this.ts_queryBox_specialtyCodes = data.specialtyList;
                        this.ts_queryBox_o2oGoodsPriceLevelCode =
                            data.o2oGoodsPriceLevelList;
                        this.ts_queryBox_types = data.goodsTypeList;
                        this.ts_queryBox_states = data.goodsStateList;
                        resolve(data);
                    }
                });
            });
        },
        // 全选
        handleCheckAllChange(val) {
            
            this.check = val ? this.checkedGameId : [];
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.tsData.specialtyCodeListOtionsArry.length;
            this.isIndeterminate =checkedCount > 0 && checkedCount < this.tsData.specialtyCodeListOtionsArry.length; 
            
        },
        handleItemChecked(){
            // 初始化商品名称
            let names=[]
            this.check.forEach(item=>{
                this.tsData.specialtyCodeListOtionsArry.forEach(j=>{
                    if(item==j.code){
                        names.push(j.name)
                    }
                })  
            })
            if(names.length>0){
                this.tsData.goodsName=`【${names.join('/')}${names.length==1?'':'/'}】${this.tsData.klassTypeStr}${this.tsData.goodsPriceLevelStr}`
            }
            this.queryLessonPrice()
        },
        init() {
            for (let i = 0; i < this.tsData.specialtyCodeListOtionsArry.length; i++) {
                this.checkedGameId.push(this.tsData.specialtyCodeListOtionsArry[i].code);
            }
            let names=[]
            this.check=this.checkedGameId
            this.check.forEach(item=>{
                this.tsData.specialtyCodeListOtionsArry.forEach(j=>{
                    if(item==j.code){
                        names.push(j.name)
                    }
                })  
            })
            if(names.length>0){
                this.tsData.goodsName=`【${names.join('/')}${names.length==1?'':'/'}】${this.tsData.klassTypeStr}${this.tsData.goodsPriceLevelStr}`
            }
        },
        handleAvatarSuccess(res, file) {
            this.tsData.imageUrl =this.dominIMGUrl+'/'+res.msg;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg/"||"image/png";
            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
            }
            return isJPG
        },
        handleTbaClick(parmas){
            if(parmas.name==2||parmas.name==3){
                this.checkOrderData.o2oKlassType=''
                this.checkOrderData.o2oGoodsPriceLevel=''
                this.specialtyCodeListArry=[]
                this.specialtyCodeListOtionsArry=[]
                this.specialtyCodeList=''
                this.oneVsOneClsstime=''
                this.oneVsOneGiveClassTime=''
                this.price=''
                this.checkOrderData.OVOgoodsName=''
                this.oneVsOneRemark=''
            }
            if(parmas.name==1||parmas.name==2){
                this.tsData={
                    TSgoodsPrice:0,
                    TSrealPrice:0,
                    TSprice:0
                }
            }
            if(parmas.name==1||parmas.name==3){
                this.tsPageResult.content = [];
                this.OVOprice = 0;
                this.OVOrealPrice = 0;
                this.OVOdiscountPrice = 0;
                this.OVOyingshouprice=0
                this.OVOremark=''
            }
        },
        closeCheckOrderShow() {
            this.OVOprice = 0;
            this.OVOrealPrice = 0;
            this.OVOdiscountPrice = 0;
            this.OVOyingshouprice=0
            this.OVOremark=''
            this.tsData={}
            this.specialtyCodeListArry=[]
            this.specialtyCodeListOtionsArry=[]
            this.specialtyCodeList=''
            this.oneVsOneClsstime=''
            this.oneVsOneGiveClassTime=''
            this.price=''
            this.checkOrderData.OVOgoodsName=''
            this.oneVsOneRemark=''
            this.$emit("closeCheckOrderShow");
        },
        // 保存下单信息
        saveOrder(){
            let data={}
            this.saveLoading=true
            
            if(this.checkOrderData.activeName==1){
                data={
                    businessLine:2,// 0:全部 1:课糖 2:学酷 3:网校 4:小台
                    studentId:this.checkOrderData.id,
                    type:this.checkOrderData.activeName,//下单类型：1：1对1定制单定制单 2：1对1商品单 3：1对1特殊单
                    mobile:this.checkOrderData.phone,
                    studentName:this.checkOrderData.name,
                    studentUserName:this.checkOrderData.studentUserName,
                    klassTypeCode:this.checkOrderData.o2oKlassType,//班型
                    goodsPriceLevelCode:this.checkOrderData.o2oGoodsPriceLevel,//商品价格级别
                    specialtyCodeList:this.specialtyCodeListArry,//学科
                    o2oLessonHour:parseInt(this.oneVsOneClsstime),//购买课时
                    o2oFreeLessonHour:this.oneVsOneGiveClassTime,//赠送课时
                    perPrice:this.price,//课单价
                    goodsRealPrice:this.oneVsOneClsstime*this.price,//商品现价
                    price:this.oneVsOneClsstime*this.price,//应收
                    goodsPrice:parseInt(parseInt(this.oneVsOneClsstime)+parseInt(this.oneVsOneGiveClassTime))*this.price,//商品原价
                    goodsName:this.checkOrderData.OVOgoodsName,//商品名称
                    gradeCode:this.checkOrderData.grade,//年级
                    goodsDiscountPrice:'',//限时折扣价
                    remark:this.oneVsOneRemark,
                    orderDataFrom:1,//下单来源 1总部 2分中心
                }
            }else if(this.checkOrderData.activeName==2){
                data={
                    businessLine:2,// 0:全部 1:课糖 2:学酷 3:网校 4:小台
                    studentId:this.checkOrderData.id,
                    type:this.checkOrderData.activeName,//下单类型：1：1对1定制单定制单 2：1对1商品单 3：1对1特殊单
                    mobile:this.checkOrderData.phone,
                    studentName:this.checkOrderData.name,
                    studentUserName:this.checkOrderData.studentUserName,
                    klassTypeCode:this.checkOrderData.o2oKlassType,//班型
                    goodsPriceLevelCode:this.checkOrderData.o2oGoodsPriceLevel,//商品价格级别
                    specialtyCodeList:this.specialtyCodeListArry,//学科
                    o2oLessonHour:parseInt(this.oneVsOneClsstime),//购买课时
                    o2oFreeLessonHour:this.oneVsOneGiveClassTime,//赠送课时
                    perPrice:this.price,//课单价
                    goodsRealPrice:this.OVOrealPrice,//商品现价
                    price:this.OVOyingshouprice,//应收
                    goodsPrice:this.OVOprice,//商品原价
                    goodsName:this.checkOrderData.OVOgoodsName,//商品名称
                    gradeCode:this.checkOrderData.grade,//年级
                    goodsDiscountPrice:this.OVOdiscountPrice,//限时折扣价
                    remark:this.OVOremark,
                    goodsIdList:this.goodsIdList,
                    orderDataFrom:1,//下单来源 1总部 2分中心
                }
            }else if(this.checkOrderData.activeName==3){
                data={
                    businessLine:2,// 0:全部 1:课糖 2:学酷 3:网校 4:小台
                    studentId:this.checkOrderData.id,
                    type:this.checkOrderData.activeName,//下单类型：1：1对1定制单定制单 2：1对1商品单 3：1对1特殊单
                    mobile:this.checkOrderData.phone,
                    studentName:this.checkOrderData.name,
                    studentUserName:this.checkOrderData.studentUserName,
                    klassTypeCode:this.tsData.o2oKlassType,//班型
                    goodsPriceLevelCode:this.tsData.o2oGoodsPriceLevelCode,//商品价格级别
                    specialtyCodeList:this.check,//学科
                    o2oLessonHour:20,//购买课时
                    o2oFreeLessonHour:this.tsData.o2oLessonHour,//赠送课时
                    perPrice:this.tsData.goodsPrice,//课单价
                    goodsRealPrice:this.tsData.TSrealPrice,//商品现价
                    price:this.tsData.TSprice,//应收
                    goodsPrice:this.tsData.TSgoodsPrice,//商品原价
                    goodsName:this.tsData.goodsName,//商品名称
                    gradeCode:this.checkOrderData.grade,//年级
                    imagePath:this.tsData.imageUrl,
                    orderType:this.tsData.orderType,
                    orderDataFrom:1,//下单来源 1总部 2分中心
                }
            }
            if(this.checkOrderData.activeName==1){
                if(!data.klassTypeCode||!data.goodsPriceLevelCode||!data.specialtyCodeList||!data.o2oFreeLessonHour){
                    this.$message.error('请填写关键字段！');
                    this.saveLoading=false
                    return false
                }
            }
            if(this.checkOrderData.activeName==2){
                if(data.goodsIdList==0){
                    this.$message.error('请选择商品！');
                    this.saveLoading=false
                    return false
                }
                
            }
            if(this.checkOrderData.activeName==3){
                if(!data.orderType||!data.goodsPriceLevelCode||!data.specialtyCodeList||!data.o2oFreeLessonHour){
                    this.$message.error('请填写关键字段！');
                    this.saveLoading=false
                    return false
                }
            }
            
            this.$api.student
            .saveOrder(data)
            .then(res => {
                if (res.result == 2) {
                    this.$message({ message: res.msg, type: 'error' });
                    this.saveLoading=false
                } else {
                    this.$message({ message: res.msg, type: 'success' });
                    this.tsPageResult.content = [];
                    this.closeCheckOrderShow()
                    this.saveLoading=false
                }
            });
        },
        tsO2oLessonHourChange(){
            this.tsData.TSgoodsPrice=parseInt(this.tsData.o2oLessonHour*this.tsData.goodsPrice)
        }
    },
    mounted(){
        // 如果是通用年级，去掉
        if (this.checkOrderData.grade == "0000") {
            this.checkOrderData.grade = null;
        }
        if (this.checkOrderData.grade && this.checkOrderData.grade != "0000") {
            this.getClassType(this.checkOrderData.grade);
            
        }
        
    }
};
</script>

<style  lang="scss">
ul {
    li {
        list-style: none;
    }
}
.mt10 {
    margin-top: 10px;
}
.mt20 {
    margin-top: 20px;
}
.ml10 {
    margin-left: 10px;
}
.ml45 {
    margin-left: 45px;
}
.mt5 {
    margin-top: 5px;
}
.mr13 {
    margin-right: 13px;
}
.checkOrder-box {
    h3 {
        margin: 10px 0;
        font-weight: 600;
    }
    .stu-info-box,
    .order-info {
        display: flex;
        justify-content: flex-start;
        p {
            text-align: left;
            width: 25%;
            height: 50px;
            line-height: 50px;
        }
    }
    .order-info2{
        p{
            width: 10%;
        }
        .el-input{
            width: 40%;
        }
    }
    .order-info3{
        .el-input{
            width: 100%;
        }
    }
    .stu-info-box {
        .el-select {
            width: 50%;
        }
    }
    .order-info {
        dl {
            display: flex;
            justify-content: flex-start;
            margin: 0;
            dt {
                width: 115px;
                text-align: left;
                margin-top: 10px;
            }
            &:first-child {
                margin-right: 30px;
            }
            dd {
                width: 25%;
                margin-left: 0;
            }
        }
    }
    .order-info2 {
        dl {
            dt {
                width: 150px;
                text-align: left;
                margin-top: 10px;
            }
            dd {
                width: 100%;
                margin-left: 0;
            }
        }
    }
    .ts-order-box {
        display: flex;
        justify-content: flex-start;
        .list {
            display: flex;
            justify-content: flex-start;
            height: 50px;
            line-height: 50px;
            > p {
                width: 78px;
                text-align: right;
            }
        }
        .list2 {
            > p {
                width: 110px;
                margin-left: 35px;
            }
        }
        .list3 {
            width: 45%;
            > p {
                width: 95px;
            }
            .el-input {
                width: 100%;
            }
        }
        .list4 {
            width: 50%;
            > p {
                width: 81px;
            }
            .el-input {
                width: 25%;
                .el-input__inner {
                    width: 100%;
                }
            }
        }
        .list5 {
            width: 100%;
            height: auto;
            > p {
                width: 106px;
            }
            .avatar-uploader .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }
            .avatar-uploader .el-upload:hover {
                border-color: #409eff;
            }
            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 178px;
                height: 178px;
                line-height: 178px;
                text-align: center;
            }
            .avatar {
                width: 178px;
                height: 178px;
                display: block;
            }
        }
    }
}
.addCommodity-box {
    .addCommodity-c-querBox {
        ul {
            display: flex;
            flex-wrap: wrap;
            li {
                width: 300px;
                display: flex;
                justify-content: space-around;
                margin-bottom: 20px;
                margin-right: 10px;
                &:last-child{
                    width: 400px;
                    p{
                        width: 29%;
                    }
                    b{
                        width: 71%;
                    }
                }
                .el-select {
                    width: 100%;
                }
                p {
                    width: 98px;
                    text-align: left;
                    margin-top: 9px;
                }
                b {
                    width: 178px;
                }
            }
        }
    }
}
</style>
